<template>
	<view class="storeList" :style="{ paddingTop: (statusBarHeight*2+88) + 'rpx' }">
		<n-loading></n-loading>
		<top-bar :type="topTabType" :transparentFixedFontColor="fontColor" :title="barTitle+'人气榜'"></top-bar>
		<image class="topBjImg" :src="topImgBj[curTop]" mode=""></image>
		<!-- 筛选 -->
		<view class="dScreen">
			<view class="btn" @tap="sortShowGo">
				{{sortList[sortVal-1].label}}
				<u-icon name="arrow-down" color="#fff" size="18"></u-icon>
			</view>
		</view>
		<!-- 商家列表 -->
		<view class="storeBox" v-if="areadyState">
			<view class="nodata" v-if="storeList.length==0">
				<image src="../../static/svgIcon/noStore.svg" mode=""></image>
				<view class="tips">暂无礼券~</view>
			</view>
			<view class="list" v-for="(item,index) of storeList" :key="index">
				<!-- 商家信息 -->
				<view class="top" @tap="goStoreInfo(item.id)">
					<dh-image class="storeImg" :src="item.logo" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
					<view class="info">
						<view class="name ellipsis"><text class="label" v-if="item.is_brand==1">品牌</text>{{item.name}}</view>
						<view class="star">
							<text class="orange">{{item.score}}</text>
							<u-rate v-model="item.score" active-color="#FF5238" gutter="0" size="22" :disabled="true"></u-rate>
							<text class="text">{{item.type_name==null?'':item.type_name}}</text>
							<text class="text">{{item.visitor}}人到店</text>
						</view>
						<view class="area">
							{{item.circle==null?'':item.circle}}
							<text>{{item.distance}}km</text>
						</view>
						<view class="ranking">品质火锅浏览人气榜第{{item.rank}}名</view>
					</view>
				</view>
				<!-- 有什么活动 -->
				<view class="hasAc" v-if="item.activities.activity" @tap="goInfo(item.activities.activity[0].id)">
					<image src="https://lovebirdopen.com/static/img/svgIcon/sBag.svg" mode=""></image>
					<view class="xPrice">￥{{item.activities.activity[0].price}}</view>
					<view class="yPrice">￥{{item.activities.activity[0].mktprice}}</view>
					<view class="tit ellipsis">{{item.activities.activity[0].name}}</view>
					<u-icon name="arrow-right" color="#999" size="20"></u-icon>
				</view>
				<!-- 有什么优惠 -->
				<view class="hasFa" v-if="item.activities.coupon">
					<view class="each" v-for="(v,i) of item.activities.coupon.slice(0,3)" :key="i">
						<image class="arch" src="https://lovebirdopen.com/static/img/svgIcon/arch1.svg" mode=""></image>
						<text class="archName">{{v.name.substring(0,10)}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 排序 -->
		<u-select v-model="sortShow" :list="sortList" @confirm="confirmSort"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 导航栏高度
				statusBarHeight: 0,
				// 顶部导航
				topTabType:'transparentFixed',
				fontColor:'#FFF',
				barTitle:'',
				curTop:null,
				topImgBj:[
					'https://lovebirdopen.com/static/img/cBj/storeListBj1.png',
					'https://lovebirdopen.com/static/img/cBj/storeListBj2.png',
					'https://lovebirdopen.com/static/img/cBj/storeListBj3.png',
					'https://lovebirdopen.com/static/img/cBj/storeListBj4.png'
				],
				// 请求参数
				areadyState:null,
				isLoadMore:false,
				page: 1,
				pageSize: 10,
				storeList:[],
				lat:0,//
				lon:0,//
				navList: [{
					name: '火锅'
				}, {
					name: '烧烤'
				}, {
					name: '夜宵'
				}, {
					name: '中餐'
				}],
				// 排序
				sortShow:false,
				sortVal:1,
				sortList:[
					{
						value: '1',
						label: '距离优先'
					},
					{
						value: '2',
						label: '评分优先'
					}
				],
			}
		},
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		onLoad: function (option) {
			this.curTop = option.index;
			this.barTitle = option.tit;
			this.isGetLocation();
		},
		onPullDownRefresh() {
			this.areadyState = null;
			this.page = 1;
			this.storeList = [];
			this.getStoreList();
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 2000);
		},
		onReachBottom() {
			if(!this.isLoadMore){
				this.getStoreList()
			}
		},
		onPageScroll(e) {
			if(e.scrollTop>50){
				this.topTabType = 'fixed';
				this.fontColor = '';
			}
			if(e.scrollTop < 50){
				this.topTabType = 'transparentFixed';
				this.fontColor = '#FFF';
			}
		},
		methods: {
			// 获取定位
			getAuthorizeInfo(a="scope.userLocation"){  //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
				var _this=this;
				uni.authorize({
					scope: a,
					success() { //1.1 允许授权
						_this.getLocationInfo();
					},
					fail(){    //1.2 拒绝授权
						console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			getLocationInfo(){  //2. 获取地理位置
				var _this=this;
				uni.getLocation({
					type: 'gcj02',
					success (res) {
						_this.lat = res.latitude;
						_this.lon = res.longitude;
						_this.getStoreList();
					}
				});
			},
			isGetLocation(a="scope.userLocation"){ // 3. 检查当前是否已经授权访问scope属性，参考下截图
				var _this=this;
				uni.getSetting({
					success(res) {
						if (!res.authSetting[a]) {  //3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
							_this.getAuthorizeInfo()
						}else{
							_this.getLocationInfo()
						}
					}
				});
			},
			getStoreList() {
				this.apiget('/shop/store-front/search-store',{page:this.page,pageSize:this.pageSize,name:this.navList[this.curTop].name,lat:this.lat,lon:this.lon,sort:this.sortVal}).then(res =>{
					if(res.data.status == 200) {
						this.storeList = this.storeList.concat(res.data.data.list);
						this.areadyState = 1;
						if(res.data.data.list.length<this.pageSize){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else if(res.data.data.list.length==this.pageSize && this.page == res.data.data.pageCount){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else{
							this.status = 'loading';
							this.page = ++ this.page;
						}
					}
				})
			},
			// 排序切换
			sortShowGo(){
				this.sortShow = true;
			},
			confirmSort(val){
				this.areadyState = null;
				this.page = 1;
				this.storeList = [];
				this.sortVal = parseInt(val[0].value);
				this.getStoreList();
			},
			// 商品详情跳转
			goInfo(id){
				uni.navigateTo({
					url: '/pages/index/goodsInfo?id='+id
				});
			},
			// 商家详情跳转
			goStoreInfo(id){
				uni.navigateTo({
					url: './storeInfo?id='+id
				});
			},
		}
	}
</script>

<style lang="scss">
	.storeList{
		min-height: 100%;
		padding: 0 32rpx;
		background: #F8F8FA;
	}
	.topBjImg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 370rpx;
	}
	.dScreen{
		position: relative;
		z-index: 1;
		padding: 8rpx 0 16rpx;
		.btn{
			display: inline-block;
			padding: 8rpx 24rpx;
			font-size: 24rpx;
			line-height: 40rpx;
			color: #FFFFFF;
			background: rgba(0, 0, 0, 0.24);
			border-radius: 38rpx;
			u-icon{
				margin-left: 12rpx;
			}
		}
	}
	.storeBox{
		position: relative;
		z-index: 1;
		.list{
			padding: 24rpx;
			margin-bottom: 16rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			.top{
				display: flex;
				align-items: center;
				.storeImg{
					width: 188rpx;
					height: 188rpx;
					margin-right: 24rpx;
					border-radius: 4rpx;
					overflow: hidden;
				}
				.info{
					flex: 1;
					width: 1px;
					
					.name{
						margin-bottom: 14rpx;
						font-size: 28rpx;
						line-height: 44rpx;
						color: #333333;
						font-weight: bold;
						
						.label{
							padding: 0 8rpx;
							margin-right: 8rpx;
							font-weight: normal;
							font-size: 24rpx;
							line-height: 32rpx;
							color: #000000;
							background: linear-gradient(103.19deg, #FFC738 3.8%, #FFBB38 96.2%);
							border-radius: 8rpx;
						}
					}
					.star{
						font-size: 24rpx;
						line-height: 40rpx;
						color: #333333;
						
						.text,u-rate{
							margin-right: 8rpx;
						}
						.orange{
							margin-right: 8rpx;
							color: #FF5238;
						}
					}
					.area{
						height: 40rpx;
						margin-bottom: 4rpx;
						font-size: 24rpx;
						line-height: 40rpx;
						color: #999999;
						text{
							float: right;
						}
					}
					
					.ranking{
						font-size: 24rpx;
						line-height: 40rpx;
						color: #B0721C;
					}
				}
			}
			.hasAc{
				margin-top: 16rpx;
				padding: 8rpx 16rpx;
				display: flex;
				background: #F5F5F5;
				border-radius: 8rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				image{
					display: inline-block;
					margin-top: 6rpx;
					width: 28rpx;
					height: 28rpx;
					margin-right: 16rpx;
				}
				.xPrice{
					color: #FF5238;
					margin-right: 8rpx;
				}
				.yPrice{
					color: #999999;
					text-decoration-line: line-through;
					margin-right: 8rpx;
				}
				.tit{
					flex: 1;
					width: 1px;
					color: #333333;
				}
			}
			.hasFa{
				margin-top: 16rpx;
				.each{
					display: inline-block;
					position: relative;
					padding-left: 20rpx;
					margin-right: 24rpx;
					margin-bottom: 20rpx;
					.arch{
						position: absolute;
						top: 50%;
						left: 0;
						width: 40rpx;
						height: 30rpx;
						margin-top: -15rpx;
					}
					.archName{
						padding: 12rpx 24rpx 12rpx 36rpx;
						font-size: 24rpx;
						line-height: 24rpx;
						color: #333333;
						background: #F5F5F5;
						border-radius: 8rpx;
					}
				}
			}
		}
	}
</style>
